<template>
  <div>
      <h2>登录页</h2>
      <!-- 页面组件内也可以使用router-link -->
      <!-- query传参 -->
      <router-link to="/article?desc=美食&city=重庆">
          登录页跳转到文章页 - 传值
      </router-link>
      <br>
      <!-- 动态路由传参 -->
      <!-- :号表示的就是动态参数 -->
      <router-link to="/user/007/post/123456">
          登录页跳转到用户页 - 传用户id
      </router-link>

      <!-- router-link ==> 声明式的导航 -->
      <!-- 编程式导航  ==> 以JS的方式实现跳转 -->
      <br>
      <button @click="goRegister">去注册页</button>
      <button @click="goList">去列表页</button>
  </div>
</template>

<script>
// 传参的模式 
// 1. 查询参数
//  <router-link to="/article?desc=美食&city=重庆">
// 2. 动态路由的方式传参  ==> 需要配置路由规则 
// {path:'/user/:id', component:User}
// <router-link to="/user/007">



// 2. 接收
// query参数接收
// this.$route.query.key

// 动态路由接收
// this.$route.params.key

export default {
    name:'LoginIndex',
    methods: {
        // 编程式导航的跳转  ==> path / name 
        goRegister(){
            // .... 省略了一些逻辑处理
            // 去注册页
            // $router ==> 全局唯一的对象

            // 1. path简写的形式
            // this.$router.push('/register')
            // 2. path实现跳转
            // this.$router.push({
            //     path:'/register'
            // })

            /* ====================  ===================== */
            // query
            // 1. path的形式传参
            this.$router.push('/register?name=淞&age=2')
            // 2. 对象的形式写上query和path
            this.$router.push({
                path:'/register',
                query:{
                    name:'淞',
                    age:'18'
                },
                // params:{
                //     name:'哈',
                //     age:'2'
                // }
            })
            // 推荐使用第二种，把query放对象中
            // 两种形式传参，query => 在url地址上都会有我们的参数

            // ==>  params传参的方式，不能和path一起使用，有了path，params无效

        },
        goList(){
            // name的形式, 传路由名，需要在router/index.js中配置一个name属性
            this.$router.push({
                name:'list',
                query:{
                    id:666
                },
                params:{
                    post:123,
                    type:'小说'
                }
            })
        }
        // name这种形式的跳转，传参，query和params都可以 
        // params和query的区别

        // query的参数会显示在url地址上
        // params参数是在内存中临时存放的，刷新就没了
    },
}
</script>

<style>

</style>